<!--  -->
<template>
  <div id="Index">
    <div class="Index-block">
      <img class="Index-bg"
           src="../../assets/img/login_border.png"
           alt="">
      <v-login v-if="pageShow === 1"
               v-on:changeText='change_pageShow($event)'
               :pageShow='pageShow'></v-login>
      <v-register v-on:changeText='change_pageShow($event)'
                  v-else-if="pageShow === 2"></v-register>
      <v-changepassword v-on:changeText='change_pageShow($event)'
                        v-else></v-changepassword>
    </div>
    <div class="Index-text">
      <p>官网主页：http://www.tikuzhuanjia.com</p>
      <p>博航科技有限公司版权所有</p>
    </div>
  </div>
</template>

<script>
import Login from '@/views/Login/components/Login.vue'
import Register from '@/views/Login/components/Register.vue'
import Changepassword from '@/views/Login/components/Changepassword.vue'

export default {
  name: 'Index',
  data () {
    return {
      pageShow: 1
    }
  },

  components: {
    'v-login': Login,
    'v-register': Register,
    'v-changepassword': Changepassword
  },

  computed: {},

  mounted () {
    console.log(this.$route.query.pageShow)
    if (this.$route.query.pageShow) {
      this.pageShow = Number(this.$route.query.pageShow)
    }
  },

  methods: {
    change_pageShow (e) {
      // console.log('这里是父组件', e)
      if (e !== this.pageShow) {
        this.pageShow = e
      }
    }
  }
}

</script>
<style lang='less' scoped>
#Index {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/login_bg.png");
  background-position: center top;
  .Index-block {
    width: 907px;
    height: 556px;
    margin: 0 auto;
    padding-top: 170px;
    position: relative;
    .Index-bg {
      width: 100%;
      height: 100%;
    }
  }
  .Index-text {
    font-size: 16px;
    color: #333;
    & > p:first-child {
      margin: 10px 0;
    }
  }
}
</style>
